<template>
  <view>
    <view class="flex justify-center align-center relative bg-fff sticky z-3 " id="container"
      :style="{ top: `${top}px` }">
      <!--骨架屏-->
      <view v-if="loading">
        <view class="flex align-center justify-center pb-30 pt-50">
          <view class="h-60 w-200 br-5 bg-f4f7f4"> </view>
          <view class="w-30 h-5 br-5 m-lr-10"></view>
          <view class="h-60 w-200 br-5 bg-f4f7f4"></view>
        </view>
      </view>

      <date-picker v-if="!loading" class="datePicker z-999" @changeTime="changeTime">
      </date-picker>
    </view>
    <!--骨架屏-->
    <list-skeleton v-if="loading"></list-skeleton>
    <view v-else-if="fixList.length && !loading">
      <view class="m-lr-20 mb-30 p-20 flex align-center justify-between bg-E9F8FF br-10" v-for="item in fixList"
        :key="item.workOrderId" @tap="clickItem(item)">
        <view class="flex flex-column oh break-all min-w-410">
          <text class="fz-40 font-bold lh-50 text-ellipsis">{{ item.deviceName || '-' }}</text>
          <text class="fz-28 mt-20 text-ellipsis">维修工程师：{{ item.repairStaff || '-' }}</text>
          <view class="mt-20 fz-28">
              报修时间：{{ item.createTime }}
          </view>
          <view class="fz-28 mt-20">
            维修开始时间：{{ item.startTime }}
          </view>
        </view>
        <view class="relative mr-30">
          <CustomCircleProgress :border-width="8" :size="128"
            :percent="getOrderPercentage(item.status)"
            :active-color="getOrderStatusColor(item.status)">
            <view class="h-full w-full lh-center color-333333">
              <text class="fz-30" :style="{ color : getOrderStatusColor(item.status)}">{{ getStatusName(item.status) }}</text>
            </view>
          </CustomCircleProgress>
        </view>
      </view>
    </view>
    <empty-icon v-if="fixList.length===0 && !loading"></empty-icon>
  </view>
</template>

<script>
import CustomCircleProgress from '../../components/CustomCircleProgress'
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import DatePicker from "@/components/DatePicker/DatePicker";
import ListSkeleton from "../../components/ListSkeleton";

import getNavBarHeight from "@/mixins/getNavBarHeight";
import dayjs from '@/libs/dayjs.min.js'
import { REP_WORK_ORDER_STATUS } from "@/utils/dict"

import { myTodoList } from "@/api/repair/workOrder";
const StatusValueList = [
  REP_WORK_ORDER_STATUS.TO_REPAIR,
  REP_WORK_ORDER_STATUS.DO_REPAIR,
  REP_WORK_ORDER_STATUS.SUSPEND
]

export default {
  name: "FixUndone",
  mixins: [getNavBarHeight],
  components: { ListSkeleton, EmptyIcon, DatePicker, CustomCircleProgress },
  data () {
    return {
      hasNext: false,
      pageNum: 1,
      pageSize: 10,
      fixList: [],
      startTime: '',
      endTime: '',
      loading: true,
    }
  },
  created () {
    this.doQuery().then(res => {
      this.hasNext = res.hasNext
      this.fixList = res.rows
    }).finally(() => {
      this.loading = false
    })
  },
  computed: {
    statusList () {
      return StatusValueList.map(item => item.value)
    }
  },
  methods: {
    getStatusName (status) {
      const result = StatusValueList.find(item => item.value == status)
      return result ? result.label : ''
    },
    getOrderPercentage (status) {
      switch (status) {
        case this.statusList[0] : return 0
        case this.statusList[1] : return 70
        case this.statusList[2] : return 100
        default : return 0
      }
    },
    getOrderStatusColor(status){
      switch (status) {
        case this.statusList[0] : return ''
        case this.statusList[1] : return '#2d8df2'
        case this.statusList[2] : return '#FF9900'
        default : return ''
      }
    },
    show () {
      this.pageNum = 1
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.fixList = res.rows
      }).finally(() => {
        this.loading = false
      })
    },
    hide () {
      this.loading = true
    },
    clickItem (item) {
      this.$tab.navigateTo(`/pages/repair/fix-undone-detail?workOrderId=${item.workOrderId}&hospitalId=${item.hospitalId}&status=${item.status}`)
    },
    reachBottom () {
      if (this.hasNext) {
        this.pageNum++
        this.doQuery().then(res => {
          this.hasNext = res.hasNext
          this.fixList = this.fixList.concat(res.rows)
        })
      }
    },

    changeTime (e) {
      this.pageNum = 1
      this.startTime = e.startTime ? dayjs(e.startTime).format('YYYY-MM-DD') : '';
      this.endTime = e.endTime ? dayjs(e.endTime).format('YYYY-MM-DD') : '';
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.fixList = res.rows
      })
    },

    doQuery () {
      const statusList = this.statusList.join(",")
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orderStartDate:this.startTime,
        orderEndDate:this.endTime,
        statusList
      }
      return myTodoList(params).then(res => {
        return Promise.resolve(res)
      }).catch(() => {
        this.loading = false
      })
      return []
    },
  },
}
</script>

<style scoped lang="scss">
.datePicker {
  margin: auto;
}
</style>
